import QtQuick 2.0

Rectangle {
    id: flickr

    signal textChanged
    property string speechText
    property int textSize: 18
    property string textFont: "Verdana"
    property color textColor: "#FFFFFFFF"
    property variant picURL: []
    property variant picWidth: []
    property int idx: 0
    
    width: 670
    height: 387
    color: "#FF000000"
    border.color: "#FF000000"
    border.width: 2
    clip: true
    
    function getNewImages() {
        var docF = new XMLHttpRequest();
        docF.onreadystatechange = function() {
            if (docF.readyState == XMLHttpRequest.DONE) {
                var jsonObject = eval('(' + docF.responseText + ')');
                flickr.picURL = [jsonObject.photos.photo[0].url_c, 
                                 jsonObject.photos.photo[1].url_c,
                                 jsonObject.photos.photo[2].url_c,
                                 jsonObject.photos.photo[3].url_c,
                                 jsonObject.photos.photo[4].url_c,
                                 jsonObject.photos.photo[5].url_c,
                                 jsonObject.photos.photo[6].url_c,
                                 jsonObject.photos.photo[7].url_c,
                                 jsonObject.photos.photo[8].url_c,
                                 jsonObject.photos.photo[9].url_c,
                                 jsonObject.photos.photo[10].url_c,
                                 jsonObject.photos.photo[11].url_c,
                                 jsonObject.photos.photo[12].url_c,
                                 jsonObject.photos.photo[13].url_c,
                                 jsonObject.photos.photo[14].url_c,
                                 jsonObject.photos.photo[15].url_c,
                                 jsonObject.photos.photo[16].url_c,
                                 jsonObject.photos.photo[17].url_c,
                                 jsonObject.photos.photo[18].url_c,
                                 jsonObject.photos.photo[19].url_c,
                                 jsonObject.photos.photo[20].url_c,
                                 jsonObject.photos.photo[21].url_c,
                                 jsonObject.photos.photo[22].url_c,
                                 jsonObject.photos.photo[23].url_c,
                                 jsonObject.photos.photo[24].url_c,
                                 jsonObject.photos.photo[25].url_c,
                                 jsonObject.photos.photo[26].url_c,
                                 jsonObject.photos.photo[27].url_c,
                                 jsonObject.photos.photo[28].url_c,
                                 jsonObject.photos.photo[29].url_c
                                ]
                flickr.picWidth = [(jsonObject.photos.photo[0].width_c/jsonObject.photos.photo[0].height_c) * flickrPic1.height, 
                                   (jsonObject.photos.photo[1].width_c/jsonObject.photos.photo[1].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[2].width_c/jsonObject.photos.photo[2].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[3].width_c/jsonObject.photos.photo[3].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[4].width_c/jsonObject.photos.photo[4].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[5].width_c/jsonObject.photos.photo[5].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[6].width_c/jsonObject.photos.photo[6].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[7].width_c/jsonObject.photos.photo[7].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[8].width_c/jsonObject.photos.photo[8].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[9].width_c/jsonObject.photos.photo[9].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[10].width_c/jsonObject.photos.photo[10].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[11].width_c/jsonObject.photos.photo[11].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[12].width_c/jsonObject.photos.photo[12].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[13].width_c/jsonObject.photos.photo[13].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[14].width_c/jsonObject.photos.photo[14].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[15].width_c/jsonObject.photos.photo[15].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[16].width_c/jsonObject.photos.photo[16].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[17].width_c/jsonObject.photos.photo[17].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[18].width_c/jsonObject.photos.photo[18].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[19].width_c/jsonObject.photos.photo[19].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[20].width_c/jsonObject.photos.photo[20].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[21].width_c/jsonObject.photos.photo[21].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[22].width_c/jsonObject.photos.photo[22].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[23].width_c/jsonObject.photos.photo[23].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[24].width_c/jsonObject.photos.photo[24].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[25].width_c/jsonObject.photos.photo[25].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[26].width_c/jsonObject.photos.photo[26].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[27].width_c/jsonObject.photos.photo[27].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[28].width_c/jsonObject.photos.photo[28].height_c) * flickrPic1.height,
                                   (jsonObject.photos.photo[29].width_c/jsonObject.photos.photo[29].height_c) * flickrPic1.height
                                  ]
                flickr.idx = 0;
                flickrPic1.source = flickr.picURL[0];
                flickrPic1.width = flickr.picWidth[0];
                flickrPic2.source = flickr.picURL[1];
                flickrPic2.width = flickr.picWidth[1];
            }
        }
        var API_key = "dd8cdcb600f20fe74e89c23489646683";
        var API_secret = "2feca2bdefb61aa4"; // NOT CURRENTLY USED
        docF.open("GET", "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key="+API_key+"&tags="+flickr.speechText+"&safe_search=1&extras=date_upload%2Curl_c&per_page=30&format=json&nojsoncallback=1");
        docF.send();
    }
    
    Image {
        id: flickrPic1
        anchors.top: parent.top
        anchors.topMargin: 2
        anchors.horizontalCenter: parent.horizontalCenter
        width: 446
        height: 357
        opacity: 1.0
        NumberAnimation on opacity {
            id: fadeIn1
            from: 0.0
            to: 1.0
            duration: 1000
        }
        NumberAnimation on opacity {
            id: fadeOut1
            from: 1.0
            to: 0.0
            duration: 1000
            onRunningChanged: {
                if(!running) {
                    flickrPic1.source = picURL[(flickr.idx+1) % 30];
                    flickrPic1.width = picWidth[(flickr.idx+1) % 30];
                }
            }
        }
    }
    Image {
        id: flickrPic2
        anchors.top: parent.top
        anchors.topMargin: 2
        anchors.horizontalCenter: parent.horizontalCenter
        width: 446
        height: 357
        opacity: 0.0
        NumberAnimation on opacity {
            id: fadeIn2
            from: 0.0
            to: 1.0
            duration: 1000
        }
        NumberAnimation on opacity {
            id: fadeOut2
            from: 1.0
            to: 0.0
            duration: 1000
            onRunningChanged: {
                if(!running) {
                    flickrPic2.source = picURL[(flickr.idx+1) % 30];
                    flickrPic2.width = picWidth[(flickr.idx+1) % 30];
                }
            }
        }
    }
    Text {
        id: flickrText
        anchors.top: parent.top
        anchors.topMargin: 360
        anchors.horizontalCenter: parent.horizontalCenter
        text: flickr.speechText
        font.family: flickr.textFont
        font.pointSize: flickr.textSize
        color: flickr.textColor
        onTextChanged: {
            if(flickr.speechText != ""){
                flickrPic1.source = "";
                flickrPic2.source = "";
                flickr.getNewImages();
            }
        }
    }
    Timer {
        interval: 10000 // 10 seconds
        running: true
        repeat: true
        triggeredOnStart: false
        onTriggered: {
            flickr.idx = (flickr.idx + 1) % 30;
            if((flickr.idx % 2) == 0) { // even idx --> show pic1
                fadeIn1.start();
                fadeOut2.start();
            }
            else {                      // odd idx  --> show pic2
                fadeOut1.start();
                fadeIn2.start();
            }
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            startSpeechRecognition("flickr", false, flickr, flickr.border, flickr.border.color, 2000);
            flickr.border.color = "red";
        }
    }

    Component.onCompleted: {
        flickrText.textChanged.connect(textChanged);
    }
}
